/**
 * 学习目标：useEffect - 副作用第二个参数
 *   官方提示：
 *      如果你熟悉 React class 的生命周期函数，
 *      你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
 *
 */
import { useEffect, useState } from 'react'

export default function App() {
  const [count, setCount] = useState(0)

  // componentDidMount()
  //    用法1：组件挂载时会执行一次
  useEffect(() => {
    console.log('组件挂载时，运行一次~~')
  }, [])

  // componentDidUpdate()
  //     用法2：类似 Vue 的立刻执行的 watch
  useEffect(() => {
    console.log('count更新时', count)
  }, [count])

  return (
    <div>
      <h1>useEffect-副作用</h1>
      <h2>count:{count}</h2>
      <button onClick={() => setCount(count + 1)}>点击+1</button>
    </div>
  )
}
